<template>
  <div class="app-container">
    <el-button
      type="primary"
      size="mini"
      round
      class="backbtn"
      icon="el-icon-arrow-left"
      @click="$router.go(-1)"
    >后退</el-button>
    <el-button
      v-powerbtn="{power: 'integral-point-add'}"
      type="primary"
      size="mini"
      round
      class="backbtn"
      icon="el-icon-circle-plus-outline"
      @click="add"
    >新增</el-button>
    <div class="app-head">
      <el-form label-position="left">
        <el-row type="flex" justify="space-around">
          <el-col :span="10">
            <el-form-item label="动作标识" label-width="100px" style="margin-bottom:0 !important;">
              <el-input
                v-model="behaviorIdentity"
                style="width:199px"
                palceholder="动作标识"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="动作名称" label-width="100px">
              <el-input
                v-model="behaviorName"
                style="width:199px"
                palceholder="行为标识"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button
              v-powerbtn="{power: 'integral-point-find'}"
              type="primary"
              size="mini"
              round
              class="absolute1"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-around">
          <el-col :span="10">
            <el-form-item label="积分变动值" label-width="100px">
              <el-input
                v-model="creditChange"
                palceholder="积分变动值"
                style="width:199px"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成长变动值" label-width="100px">
              <el-input
                v-model="growthChange"
                palceholder="成长变动值"
                style="width:199px"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button
              v-powerbtn="{power: 'integral-point-find'}"
              size="mini"
              round
              class="absolute1"
              icon="el-icon-refresh"
              @click="reset"
            >重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-table">
      <el-table
        :data="list"
        border
        style="width:100%"
      >
        <el-table-column label="序号">
          <template slot-scope="rscope">
            {{ rscope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="动作标识">
          <template slot-scope="escope">
            {{ escope.row.behaviorIdentity }}
            <!-- <el-popover
              v-if="scope.row.collectionTime"
              :content="scope.row.collectionTime"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.collectionTime }}</span>
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="动作名称">
          <template slot-scope="wscope">
            {{ wscope.row.behaviorName }}
            <!-- <el-popover
              v-if="scope.row.behaviorName"
              :content="scope.row.behaviorName"
              placement="top"
              trigger="hover">
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.behaviorName }}</span>
            </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="积分变动">
          <template slot-scope="qscope">
            {{ qscope.row.creditChange }}
          </template>
        </el-table-column>
        <el-table-column label="成长值变动">
          <template slot-scope="sscope">
            {{ sscope.row.growthChange }}
          </template>
        </el-table-column>
        <el-table-column label="描述">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.desc"
              :content="scope.row.desc"
              placement="top"
              trigger="hover" />
              <span slot="reference" style="cursor:pointer" type="info">{{ scope.row.desc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="ascope">
            <el-button
              v-powerbtn="{power: 'integral-point-edit'}"
              type="primary"
              plain
              round
              size="mini"
              @click="edit(ascope.row)"
            >编辑</el-button>
            <el-button
              v-powerbtn="{power: 'integral-point-delete'}"
              type="primary"
              plain
              size="mini"
              round
              @click="deleteActions(ascope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :current-page="pageid"
          :page-sizes="[20,50,100]"
          :page-size="pagecount"
          :total="count"
          background
          highlight-current-row
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <edit-action :edit-dialog="editDialog" :scope="scope" :plat-id="platId" @closeAction="closeAction" />
      </div>
    </div>
  </div>
</template>
<script>
import secret from '@/utils/secret'
import { getList, deleteAction } from '@/api/actionManage'
import { mapGetters } from 'vuex'
import powerbtn from '@/directive/powerbtn/index.js'
import editAction from './edit.vue'
export default {
  name: 'ActionManage',
  directives: {
    powerbtn
  },
  components: {
    editAction: editAction
  },
  props: {
    pointDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showPointDialog: false,
      date: null, // 时间
      resultDate: ['', ''], // 更正时间格式
      behaviorIdentity: '', // 动作标识
      behaviorName: '', // 动作名称
      creditChange: '', // 积分变动值
      growthChange: '', // 成长值变动值
      list: null, // 列表
      endDate: '', // 结束时间
      startDate: '', // 开始日期
      pageid: 1, // 当前页数
      pagecount: 20, // 每页显示条数
      count: null, // 总数量
      pages: null, // 总页数
      flag: true,
      scope: null,
      look: false, // 查询按钮权限
      addBtn: false,
      editBtn: false,
      dele: false,
      editDialog: false, // 遮罩,
      platId: this.$route.params.code,
      param: Object, // 搜索条件
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      pickerOptions2: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  computed: {
    ...mapGetters(['assignment', 'token'])
  },
  watch: {
  },
  mounted() {
    /* var power = JSON.parse(this.$route.params.power)
    var that = this
    power.forEach(function(item) {
      if (item === 'search') {
        that.look = true
      }
      if (item === 'add') {
        that.addBtn = true
      }
      if (item === 'edit') {
        that.editBtn = true
      }
      if (item === 'dele') {
        that.dele = true
      }
    }) */
    this.search()
  },
  methods: {
    // 当前页面改变时
    handleSizeChange(num) {
      this.flag = false
      this.pagecount = num
      const data = {
        // token: this.token,
        platformId: this.$route.params.code,
        behaviorIdentity: this.behaviorIdentity, // 动作标识
        behaviorName: this.behaviorName, // 动作名称
        creditChange: this.creditChange, // 积分变动值
        growthChange: this.growthChange, // 成长值变动值
        pageid: 1,
        pagecount: parseInt(num)
      }
      console.log('请求参数')
      console.log(data)
      getList(secret.Encrypt(data)).then(response => {
        this.flag = true
        this.pageid = 1
        console.log('返回数据')
        console.log(response)
        this.list = response.data.list // 列表项
        if (response.data.list.length > 0) {
          this.count = parseInt(response.data.count) // 总数量
        } else {
          this.count = 0
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
    },
    // 跳转某页
    handleCurrentChange(num) {
      const data = {
        // token: this.token,
        platformId: this.$route.params.code,
        behaviorIdentity: this.behaviorIdentity, // 动作标识
        behaviorName: this.behaviorName, // 动作名称
        creditChange: this.creditChange, // 积分变动值
        growthChange: this.growthChange, // 成长值变动值
        pageid: num,
        pagecount: this.pagecount
      }
      console.log('请求参数')
      console.log(data)
      // if (this.flag === true) {
      getList(secret.Encrypt(data)).then(response => {
        this.list = response.data.list // 列表项
        if (response.data.list.length > 0) {
          this.count = parseInt(response.data.count) // 总数量
        } else {
          this.count = 0
        }
        this.pageid = num // 当前页数
        console.log('返回数据')
        console.log(response.data)
      }).catch(() => {
        this.$message({
          message: '请求列表失败，请重试',
          type: 'error'
        })
      })
      // }
    },
    // 校验结束时间
    checkTime(time) {
      const newStr = new RegExp('-', 'g')
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.endDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var start
          if (this.startDate !== null) {
            start = new Date(this.startDate.replace(newStr, '/')).getTime()
          } else {
            start = ''
          }
          var end = new Date(time.replace(newStr, '/')).getTime()
          if (end < start) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.endDate = ''
          }
        }
      }
    },
    // 校验开始时间
    checkStartTime(time) {
      // 比较是否大于现在的时间
      const newStr = new RegExp('-', 'g')
      var selectTime
      if (!!time) { // eslint-disable-line
        selectTime = new Date(time.replace(newStr, '/')).getTime() // 所选时间
      } else {
        selectTime = ''
      }
      const nowTime = Date.now() // 现在的时间
      if (selectTime > nowTime) {
        this.$alert('所选时间不能大于当前时间！', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.startDate = ''
          }
        })
      } else {
        if (!!time) {  // eslint-disable-line
          var end
          if (this.endDate !== null) {
            end = new Date(this.endDate.replace(newStr, '/')).getTime()
          } else {
            end = ''
          }
          var first = new Date(time.replace(newStr, '/')).getTime()
          if (!!end && first > end) {
            this.$message({
              message: '开始时间不能大于结束时间',
              type: 'error'
            })
            this.startDate = ''
          }
        }
      }
    },
    // 编辑
    edit(scope) {
      this.editDialog = true
      this.scope = scope
    },
    add() {
      this.editDialog = true
      this.scope = {
        id: '',
        behaviorIdentity: '',
        behaviorName: '',
        creditChange: '',
        growthChange: '',
        desc: ''
      }
    },
    // 删除
    deleteActions(scope) {
      this.$confirm('确定要删除该动作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = {
          // token: this.token,
          id: scope.id
        }
        console.log('请求参数')
        console.log(data)
        deleteAction(secret.Encrypt(data)).then(response => {
          console.log('返回数据')
          console.log(response)
          this.$message({
            message: response.resultDesc,
            type: 'success'
          })
          // 删除本页最后一条bug
          const pages = (this.count - 1) % this.pagecount
          if (pages === 0) {
            if (this.pageid > 1) {
              this.handleCurrentChange(parseInt(this.pageid - 1))
            } else {
              this.handleCurrentChange(parseInt(this.pageid))
            }
          } else if (pages > 0) {
            this.handleCurrentChange(this.pageid)
          }
        })
      }).catch(() => {
        console.log('删除取消')
      })
    },
    // 搜索
    search() {
      // if (this.startDate === null) {
      //   this.startDate = ''
      // }
      // if (this.endDate === null) {
      //   this.endDate = ''
      // }
      const param = {
        platformId: this.$route.params.code,
        behaviorIdentity: this.behaviorIdentity, // 动作标识
        behaviorName: this.behaviorName, // 动作名称
        creditChange: this.creditChange, // 积分变动值
        growthChange: this.growthChange, // 成长值变动值
        pageid: 1,
        pagecount: this.pagecount
      }
      this.param = param
      console.log('请求参数')
      console.log(param)
      getList(secret.Encrypt(param)).then(response => {
        var data = response.data
        this.list = data.list
        this.pageid = 1
        if (response.data.list.length < 1) {
          this.count = 0
        } else {
          this.count = parseInt(response.data.count)
        }
        console.log('返回数据')
        console.log(this.list)
      })
    },
    // 重置
    reset() {
      this.behaviorIdentity = '' // 动作标识
      this.behaviorName = '' // 动作名称
      this.creditChange = '' // 积分变动值
      this.growthChange = '' // 成长值变动值
    },
    // 编辑回调
    closeAction(status) {
      this.editDialog = false
      if (status) {
        this.handleCurrentChange(this.pageid)
      }
    }
  }
}
</script>
<style scoped>
.absolute1{
  position: absolute;
  top: 2px;
  right: -5px;
}
.timeLength1 {
width: 180px;
}
.addBtn{
  position: relative;
  top: 10px;
}
.backbtn{
  margin-bottom: 5px;
}
.el-form-item{
  margin-bottom: 0 !important;
}
</style>
